<!-- 
  Kuda includes a library and editor for authoring interactive 3D content for the web.
  Copyright (C) 2011 SRI International.

  This program is free software; you can redistribute it and/or modify it under the terms
  of the GNU General Public License as published by the Free Software Foundation; either 
  version 2 of the License, or (at your option) any later version.
 
  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; 
  without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
  See the GNU General Public License for more details.
 
  You should have received a copy of the GNU General Public License along with this program; 
  if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, 
  Boston, MA 02110-1301 USA.
-->

<div id="hudDpyEditor">
	<h1 class="displayName">HUD Display Name</h1>
	<form id="hudDpyForm" method="post">
		<fieldset id="hudPgeOptions">
			<legend>
				Display Operations
			</legend>
			<ol>
				<li>
					<button id="hudDpyAddPageBtn">
						Add Page
					</button>
					<button id="hudDpyRemoveBtn">
						Remove Display
					</button>
				</li>
			</ol>
		</fieldset>
	</form>
</div>
<div id="hudPgeEditor">
	<h1 class="displayName">HUD Page Name</h1>
	<form id="hudPgeForm" method="post">
		<fieldset id="hudPgeParams">
			<legend>
				Set Page Properties
			</legend>
			<ol>
				<li class="multipInput">
					<label id="hudPgeColorLbl" class="short" >Color</label>
					<div class="buttons">
						<button id="hudPgeSaveBtn" disabled="disabled">
							Save
						</button>
						<button id="hudPgeCancelBtn">
							Cancel
						</button>
					</div>
				</li>
			</ol>
		</fieldset>	
		<fieldset id="hudPgeOptions">
			<legend>
				Page Operations
			</legend>
			<ol>
				<li>
					<button id="hudPgeAddTextBtn">
						Add Text
					</button>
					<button id="hudPgeAddImageBtn">
						Add Image
					</button>
					<button id="hudPgeRemoveBtn">
						Remove Page
					</button>
				</li>
			</ol>
		</fieldset>
	</form>
</div>
<div id="hudTxtEditor">
	<h1 class="displayName">HUD Text Name</h1>
	<form id="hudTxtForm" class="sidebarForm" method="post" action="">
		<fieldset id="hudTxtProps">
			<legend>
				Set Text Properties
			</legend>
			<ol>
				<li>
					<label for="hudTxtText">
						Text
					</label>
					<textarea id="hudTxtText"></textarea>
				</li>
				<li>
					<input type="text" value="" id="hudTxtWidth" class="short" placeholder="Width" />
				</li>
				<li>
					<label for="hudTxtPosition" class="short" >
						Position
					</label>
					<div id="hudTxtPositionDiv">
					</div>
				</li>
	         <li>
               <label for="hudTxtPercentPosition" class="short" >
                  % Position
               </label>
					<div id="hudTxtPercentPositionDiv" class="optional">
					</div>
            </li>
	   		<li class="multipInput">
					<label id="hudTxtColorLbl" class="short" >Color</label>
				</li>
				<li>
					<input type="text" value="" id="hudTxtSize" class="optional short" placeholder="Size" />
				</li>
				<li>
					<label for="hudTxtFont">
						Font
					</label>
					<select id="hudTxtFont" class="optional">
						<option value="-1">Select a Font</option>
						<option value="arial">Arial</option>
						<option value="courier">Courier</option>
						<option value="helvetica">Helvetica</option>
						<option value="tahoma">Tahoma</option>
						<option value="times new roman">Times New Roman</option>
						<option value="verdana">Verdana</option>
					</select>
				</li>
				<li>
					<label for="hudTxtStyle">
						Style
					</label>
					<select id="hudTxtStyle" class="optional">
						<option value="-1">Select a Style</option>
						<option value="normal">Normal</option>
						<option value="bold">Bold</option>
						<option value="italic">Italic</option>
						<option value="bold italic">Bold Italic</option>
					</select>
				</li>
				<li>
					<label for="hudTxtAlign">
						Alignment
					</label>
					<select id="hudTxtAlign" class="optional">
						<option value="-1">Select an Alignment</option>
						<option value="left">Left</option>
						<option value="center">Center</option>
						<option value="right">Right</option>
					</select>
				</li>
			</ol>
		</fieldset>
		<fieldset id="hudTxtSave">
			<legend>
				Save Text
			</legend>
			<ol>
				<li>
					<div class="buttons">
						<button id="hudTxtSaveBtn" disabled="disabled">
							Save
						</button>
						<button id="hudTxtCancelBtn">
							Cancel
						</button>
						<button id="hudTxtRemoveBtn">
							Remove
						</button>
					</div>
				</li>
			</ol>
		</fieldset>
	</form>
</div>
<div id="hudImgEditor">
	<h1 class="displayName">HUD Image Name</h1>
	<form id="hudImgForm" class="sidebarForm" method="post" action="">
		<fieldset id="hudImgProps">
			<legend>
				Set Image Properties
			</legend>
			<ol>
				<li>
					<label for="hudImgPosition" class="short" >
						Position
					</label>
					<div id="hudImgPositionDiv">
					</div>
				</li>
            <li>
               <label for="hudImgPercentPosition" class="short" >
                  % Position
               </label>
					<div id="hudImgPercentPositionDiv" class="optional">
					</div>
            </li>
				<li>
					<input type="text" value="" id="hudImgUrl" class="optional" placeholder="URL" />
				</li>
			</ol>
		</fieldset>
		<fieldset id="hudImgSave">
			<legend>
				Save Image
			</legend>
			<ol>
				<li>
					<div class="buttons">
						<button id="hudImgSaveBtn" disabled="disabled">
							Save
						</button>
						<button id="hudImgCancelBtn">
							Cancel
						</button>
						<button id="hudImgRemoveBtn">
							Remove
						</button>
					</div>
				</li>
			</ol>
		</fieldset>
	</form>
</div>
